<template>
  <div class="repay">
    <HederTop title="Repayment"></HederTop>
    <!--借款详情-->
    <preview
      :data="previewData"
      :payintype='query.payinType'
      :extensionamount='query.amount'
      @couponAmount="handleCouponAmount">
    </preview>

    <div class="main border-top-icon">
      <div v-if="onlineList.length" class="repay_methods">
        <div class="repay_title">Online repayment</div>
        <ul>
          <li v-for="channel in onlineList" @click="goRepayStep(channel)">
            <img :src="require(`@/assets/imgs/repay/${channel.channelCode}.png`)" alt="">
            {{channel.name}}
          </li>
        </ul>
        <p class="warning" style="display: none">If your online wallet exceeds the limit, repay it through other channels</p>
      </div>
      <div v-if="offlineList.length" class="repay_methods">
        <div class="repay_title">Offline repayment</div>
        <ul>
          <li v-for="channel in offlineList" @click="goRepayStep(channel)">
            <img :src="require(`@/assets/imgs/repay/${channel.channelCode}.png`)" alt="">
            {{channel.name}}
          </li>
        </ul>
      </div>
      <div v-if="instapayList.length" class="repay_methods">
        <div class="repay_title">Instapay repayment</div>
        <ul>
          <li v-for="channel in instapayList" @click="goRepayStep(channel)">
            <img :src="require(`@/assets/imgs/repay/${channel.channelCode}.png`)" alt="">
            {{channel.name}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script src="./main.js"></script>

<style lang="scss">
@import "index";
</style>
